<template>
  <div class="addCard">
    <div class="top">
      <div class="left" @click="$router.go(-1)">
        <el-icon size="20"><Back /></el-icon>返回
      </div>
      <h2>{{ $route.query.title }}</h2>
    </div>
    <div class="middle">
      <div class="ttop">
        <h3>车辆信息</h3>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="90px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <div style="display: flex">
            <el-form-item style="width: 50%" label="车主姓名" prop="personName">
              <el-input v-model="ruleForm.personName" />
            </el-form-item>
            <el-form-item
              style="width: 50%"
              label="联系方式"
              prop="phoneNumber"
            >
              <el-input v-model="ruleForm.phoneNumber" />
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item style="width: 50%" label="车俩号码" prop="carNumber">
              <el-input v-model="ruleForm.carNumber" />
            </el-form-item>
            <el-form-item style="width: 50%" label="车辆品牌" prop="carBrand">
              <el-input v-model="ruleForm.carBrand" />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="bbop">
        <h3>最新一次月卡缴费信息</h3>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="90px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <div style="display: flex">
            <el-form-item style="width: 50%" label="有效日期">
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="Start date"
                end-placeholder="End date"
              />
            </el-form-item>
            <el-form-item
              style="width: 50%"
              label="支付金额"
              prop="paymentAmount"
            >
              <el-input v-model="ruleForm.paymentAmount" />
            </el-form-item>
          </div>
          <div style="display: flex">
            <el-form-item
              style="width: 50%"
              label="支付方式"
              prop="paymentMethod"
            >
              <el-select v-model="ruleForm.paymentMethod">
                <el-option label="支付宝" value="Alipay" />
                <el-option label="微信" value="WeChat" />
                <el-option label="线下" value="Cash" />
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="bottom">
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        确定
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { addCardApi, getCardDetailApi, editCardApi } from "@/api/api";
import { ref, reactive } from "vue";
import { Back } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import "element-plus/es/components/message/style/css";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
interface RuleForm {
  personName: string;
  phoneNumber: string;
  carNumber: string;
  carBrand: string;
  paymentAmount: string;
  paymentMethod: boolean;
  cardStartDate: string;
  cardEndDate: string;
}
const formSize = ref("default");
const value1 = ref<any>([]);
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  personName: "",
  phoneNumber: "",
  carNumber: "",
  carBrand: "",
  paymentAmount: "",
  paymentMethod: false,
  cardStartDate: "",
  cardEndDate: "",
});
const rules = reactive<FormRules<RuleForm>>({
  personName: [{ required: true, message: "请输入车主姓名", trigger: "blur" }],
  phoneNumber: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
  carNumber: [{ required: true, message: "请输入车俩号码", trigger: "blur" }],
  carBrand: [{ required: true, message: "请输入车辆品牌", trigger: "blur" }],
  paymentAmount: [
    { required: true, message: "请输入支付金额", trigger: "blur" },
  ],
  paymentMethod: [
    { required: true, message: "请输入有效时间结束", trigger: "blur" },
  ],
});
const info = ref<any>({});
if (route.query.title == "编辑月卡") {
  getCardDetailApi({ id: route.query.id }).then((res: any) => {
    console.log(res);
    if (res.code == 10000) {
      info.value = res.data;
      ruleForm.personName = res.data.personName;
      ruleForm.phoneNumber = res.data.phoneNumber;
      ruleForm.carNumber = res.data.carNumber;
      ruleForm.carBrand = res.data.carBrand;
      ruleForm.paymentAmount = res.data.paymentAmount;
      ruleForm.paymentMethod = res.data.paymentMethod;
      value1.value = [res.data.cardStartDate, res.data.cardEndDate];
    }
  });
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm.cardStartDate = value1.value[0];
      ruleForm.cardEndDate = value1.value[1];
      if (route.query.title == "编辑月卡") {
        editCardApi({
          ...ruleForm,
          carInfoId: info.value.carInfoId,
          rechargeId: info.value.rechargeId,
        }).then((res: any) => {
          console.log(res);
          if (res.code === 10000) {
            ElMessage({
              message: "编辑成功",
              type: "success",
            });
            router.push("/card");
          }
        });
      } else {
        addCardApi(ruleForm).then((res: any) => {
          console.log(res);
          if (res.code === 10000) {
            ElMessage({
              message: "添加成功",
              type: "success",
            });
            router.push("/card");
          }
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="scss" scoped>
h3 {
  margin: 10px 0;
}
.addCard {
  width: 100vw;
  height: 100vh;
  background-color: #f4f6f8;
  .bottom {
    width: 100%;
    height: 100px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .top {
    width: 100%;
    height: 100px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  .left {
    display: flex;
    align-items: center;
    margin-right: 20px;
  }
  h2 {
    font-size: 20px;
    font-weight: normal;
  }
}
.ttop,
.bbop {
  padding: 20px 20px;
  box-sizing: border-box;
  width: 80%;
  height: 200px;
  margin: 20px auto;
  background-color: #fff;
}
</style>
